<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <link rel="stylesheet" href="preview/css/swiper.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="preview/js/swiper.min.js"></script>
    <title>大数据单模块-本馆风采</title>
    <style>
        /*本馆风采*/
        .style-content {
            width: 100%;
            height: 3.96rem;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 0.18rem;
            background: #fff;
            position: relative;
        }
        .style-content img {
            width: 100%;
            height: 100%;
        }
        .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
            background-color: #fff;
        }
        .swiper-container-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            text-align: right;
            bottom: 0;
        }
        .banner_img_desName {
            font-size: 0.16rem;
            width: 100%;
            height: 0.3rem;
            line-height: 0.3rem;
            position: absolute;
            background-color: rgba(76, 113, 168, 0.8);
            color: #fff;
            bottom: 0;
            text-align: center;
            z-index: 99999;
        }
        .style{cursor: pointer}
    </style>
</head>
<body>
    <div class="style8">
        <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="resource_str">本馆风采</span></div>
        <div class="style-content">
            <div class="swiper-container swiper-container-style">
                <div class="swiper-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="block"></div>
    </div>
</body>
<script>
    window.onresize = function(){
        page_init(100,822,"本馆风采");
    };
    window.onload = function(){
        page_init(100,822,"本馆风采");
        var gobalAddr="whfw.superlib.com:9025";
        var wsPath = "wss://" + gobalAddr + "/cxts/websocket/resource";
        banner_style(wsPath);
        ///本馆风采
        var websocket_banner;
        //最大重连次数
        var max_try_num_bgfc = 10;
        var curr_try_num_bgfc = 0;
        function banner_style(ws_url){
            curr_try_num_bgfc++;
            var bannerImg_src;
            try{
                websocket_banner=new WebSocket(ws_url);//参数是服务器地址，还有一个参数是自协议可以不写
                websocket_banner.onopen=function(res){
                    console.log('info ---->> 本馆风采连接成功...');
                };
                websocket_banner.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var data = json.data;
                    if (data == null || data == undefined || data.length == 0) {
                        console.log("warning ---->> 本馆风采无数据返回...");
                        return;
                    }
                    console.log('info ---->> 本馆风采数据更新了...');
                    var rs_type = data[0].f_type;
                    if(rs_type=="img"){
                        var str = '';
                        $.each(data,function(i,e){
                            if(e.f_url.indexOf("http")==0){
                                bannerImg_src=e.f_url;
                            }else{
                                ///说明不包含https,要拼接地址
                                bannerImg_src='https://'+gobalAddr+e.f_url;////书封地址拼接
                            }
                            str+='<div class="swiper-slide swiper-no-swiping">' +
                                    '<img src="'+bannerImg_src+'" height="100%"/>' +
                                    '<div class="banner_img_desName">'+e.f_title+'</div>'+
                                    '</div>';
                        });
                        str='<div class="swiper-wrapper">'+str+'</div>'+
                                '<div class="swiper-pagination" style="width:100%;bottom:0;height:0.3rem;padding-right: 0.3rem;"></div>';

                        $('.swiper-container-style').html(str);
                        var swiper = new Swiper('.swiper-container-style', {
                            pagination: {
                                el: '.swiper-pagination',
                                type: 'bullets',////点分页器
                                clickable :true,///点击分页器会控制切换
                            },
                            loop:true,
                            autoplay: {
                                delay: 5000,
                                stopOnLastSlide: false,
                                disableOnInteraction: true,
                            },
                            noSwiping : true
                        });
                        /////如果只有一个slide就销毁swiper
                        if(swiper.slides.length<=3){
                            swiper.destroy();
                        }
                    }else if(rs_type=="video"){/////
                        var vList = [];
                        var video_url = "";
                        var curr = 0;
                        $.each(data,function(i,e){
                            if(e.f_url.indexOf("http")==0){
                                video_url=e.f_url;
                            }else{
                                ///说明不包含https,要拼接地址
                                video_url='https://'+gobalAddr+ e.f_url;
                            }
                            vList.push(video_url);
                        });
                        str='<div id="banner_video_all" style="height: 100%;width:100%"><video height="100%" width="100%" id="banner_video_01"><source src="./flv.flv" type="video/flv"><source src="'+vList[0]+'" type="video/mp4" height="100%" width="100%"></video></div>';
                        $('.swiper-container').html(str);
                        var vLen = vList.length;
                        var video = document.getElementById("banner_video_01");
                        video.play();
                        video.addEventListener('ended', function(){
                            console.log('视频播放完毕了，切换下一个,当前视频索引是'+curr);
                            play();
                        });
                        function play() {
                            video.src = vList[curr];
                            video.load();
                            video.play();
                            curr++;
                            if(curr >= vLen){
                                curr = 0; //重新循环播放
                            }
                        }
                    }
                    divFlex("style8");////调用缩放功能

                };
                websocket_banner.onclose=function(e){
                    if (curr_try_num_bgfc <= max_try_num_bgfc) {
                        console.log("warning ---->> 本馆风采连接关闭，6秒后重新连接...");
                        setTimeout(function () {
                            banner_style(ws_url);
                        }, 6000);
                    } else {
                        console.log("warning ---->> 本馆风采连接超过最大重连次数，不再重连...");
                    }
                };
                websocket_banner.onerror = function () {
                    console.log("error ---->> 本馆风采连接发生错误...");
                };
            } catch (e) {
                console.log("error ---->> 本馆风采连接发生错误...");
            }
        }
        ///本馆风采结束
    }
</script>

</html>